<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            font-size: 10px;
            background-color: #141414;
            width: 100%;
            font-family: "微软雅黑";
        }
        
        .profile-box {
            width: 80rem;
            background-color: white;
            margin: 2rem auto;
        }
        
        .profile-box .header {
            width: 100%;
            height: 20rem;
            background-color: #ededed;
            border-bottom: 0.4rem solid orange;
        }
        
        .profile-box .image {
            float: left;
            padding: 2rem;
        }
        
        .profile-box .image img {
            border-radius: 50%;
        }
        
        .profile-box .title {
            float: left;
            padding: 2rem;
        }
        
        .profile-box .detail {
            float: right;
            margin-top: 2rem;
            margin-right: 2rem;
        }
        
        .profile-box h1 {
            padding: 0rem;
            margin: 0rem;
            font-size: 4rem;
            padding-left: 0;
            padding-top: 1rem;
        }
        
        .profile-box h2 {
            padding: 0;
            margin: 0;
            font-size: 2rem;
            padding-left: 0;
            padding-top: 1rem;
        }
        
        .profile-box .detail p {
            padding: 0;
            margin: 0;
            font-size: 2rem;
            padding-top: 0.5rem;
            padding-right: 1rem;
        }
        
        .content .main-title {
            width: 10rem;
            padding: 0rem;
            margin: 0rem;
            font-size: 2rem;
            font-style: italic;
            padding-left: 3rem;
            padding-top: 2rem;
            float: left;
            color: orange;
        }
        
        .content .description {
            width: 60rem;
            padding: 0;
            margin: 0;
            padding-top: 2rem;
            margin-right: 2rem;
            font-size: 1.5rem;
            float: right;
            padding-bottom: 1rem;
            line-height: 2rem;
        }
        
        .clearfix:after {
            display: block;
            content: "";
            clear: both;
        }
        
        .profile-box .hr {
            width: 75rem;
            height: 1rem;
            padding-top: 2rem;
            border-bottom: 1px solid #cccccc;
            margin: 0 auto;
        }
        
        .content .experience {
            width: 60rem;
            float: right;
            margin-right: 2rem;
        }
        
        .content .experience h3 {
            font-size: 2rem;
            padding: 0;
            margin: 0;
            padding-top: 2rem;
            margin-bottom: 1rem;
        }
        
        .content .experience h4 {
            padding: 0;
            margin: 0;
            font-size: 1.5rem;
        }
        
        .content .experience p {
            width: 60rem;
            padding: 0;
            margin: 0;
            font-size: 1.5rem;
            padding-bottom: 1rem;
            line-height: 2rem;
        }
        
        .content ul {
            width: 60rem;
            padding: 0;
            margin: 0;
            padding-top: 2rem;
            margin-right: 2rem;
            font-size: 1.5rem;
            float: right;
            padding-bottom: 1rem;
            line-height: 2rem;
        }
        
        .content ul li {
            width: 15rem;
            padding: 0;
            margin: 0;
            font-size: 1.5rem;
            float: left;
        }
    </style>
</head>

<body>
    <div class="profile-box">
        <div class="header">
            <div class="image"><img src="headshot.jpg"></div>
            <div class="title">
                <h1>李明</h1>
                <h2>前段开发工程师</h2>
            </div>
            <div class="detail">
                <p>email:liming@123.com</p>
                <p>个人主页：www.liming.com</p>
                <p>电话号码：12345678900</p>
            </div>
        </div>
        <div class="content clearfix">
            <div class="main-title">个人简介</div>
            <div class="description">女孩，请永远的记住你是一个女孩。自己没有足够的优秀，就不要寄予别人很有多么爱你。要深知自我谦卑，却依然高姿态的活着。辛苦一点没有关系，但是不要试图 去依赖一个人。女孩不是女人，要懂得心境澄澈，淡然处之，善良温润，率性明媚，感怀悲伤，容，只为悦己者。发誓，不再相信童话，只为珍惜真实的美好。</div>
        </div>
        <div class="hr"></div>
        <div class="content clearfix">
            <div class="main-title">工作经历</div>
            <div class="experience">
                <h3>XXX公司</h3>
                <h4>2012年-2013年</h4>
                <p>我始终都不是很明白为什么我不能被所有人喜欢，因为不屑于说那些有的没的的玩笑话么，还是心思太过于沉重，不能没心没肺似的笑起来肆无忌惮。至少，我现在真 的没办法做到那样。那些原以为可以陪伴在身边的朋友，渐渐的疏远了，甚至交好那些我不会喜欢的人。曾经要怪是他们从我身边给抢走了，现在确越觉得不是。我们的感情没有那么深，不过是一个所谓的伴吧。</p>
            </div>
            <div class="experience">
                <h3>XXX公司</h3>
                <h4>2013-2015年</h4>
                <p>在你悲伤的快要死的时候，什么都不是你的，抱怨着不公平，为什么别人拥有你却没有。不再说那些用来平抚人心的话。我只知道在夜晚抬起头，整个天空都是你的，别人无法夺走的东西。夜空有那么深邃与澄澈，妄想看穿。</p>
            </div>
            <div class="experience">
                <h3>XXX公司</h3>
                <h4>2015至今</h4>
                <p>有多少女孩期待可以成为画里的主角，哪怕是一道专注的风景。下起雪的时候总是美好的，这种情景总是让姑娘们变得娇嗔。女孩，下雪的时候你会哭么。怎么会，那些欢乐都融在雪球里了，在谁身上崩裂就是谁的幸运。可是女孩为什么你会哭。我不是在妒忌别人的欢笑，是被感动的。天命自知，有什么好过分追逐的。
                </p>
            </div>
        </div>
        <div class="hr"></div>
        <div class="content clearfix">
            <div class="main-title">工作技能</div>
            <ul>
                <li>CSS</li>
                <li>HTML</li>
                <li>JAVAscript</li>
                <li>Actionscript</li>
                <li>jQuery</li>
                <li>Ajax</li>
                <li>ASP.NET</li>
                <li>firebug</li>
            </ul>

        </div>
        <div class="hr"></div>
        <div class="content clearfix">
            <div class="main-title">教育经历</div>
            <div class="experience">
                <h3>XX大学</h3>
                <h4>2008-2012</h4>
                <p>有多少女孩期待可以成为画里的主角，哪怕是一道专注的风景。下起雪的时候总是美好的，这种情景总是让姑娘们变得娇嗔。女孩，下雪的时候你会哭么。怎么会，那些欢乐都融在雪球里了，在谁身上崩裂就是谁的幸运。可是女孩为什么你会哭。我不是在妒忌别人的欢笑，是被感动的。天命自知，有什么好过分追逐的。
                </p>
            </div>
        </div>
    </div>

</body>

</html>